<template>
    <div class="main">
        <div class="bookCityBigBox">
            <!-- <span>这是书城页面</span> -->
            <!-- 书城类型切换 -->
            <div class="BCBBB">
                <div class="BCcontainer">
                    <div class="bookCityTitle">
                        <div class="Toptions">
                            <span :class="{con:bookCityType==0}" @click="BCT">推荐</span>
                            <span :class="{con:bookCityType==2}" @click="BCT">女生</span>
                            <span :class="{con:bookCityType==3}" @click="BCT">男生</span>
                            <span :class="{con:bookCityType==4}" @click="BCT">图书</span>
                        </div>
                        <!-- <div class="search"> -->
                            <router-link to="/search/search" class="search" tag="div">
                                <span class="iconfont icon-sousuo"></span>
                            </router-link>
                        <!-- </div> -->
                    </div>
                </div>
            </div>
            <bookCityRecommend v-if="bookCityType==0" :booklist="booklist"></bookCityRecommend>
            <bookCityWomen v-if="bookCityType==2"  :booklist="booklist"></bookCityWomen>
            <bookCityMan v-if="bookCityType==3"  :booklist="booklist"></bookCityMan>
            <bookCityBooks v-if="bookCityType==4"  :booklist="booklist"></bookCityBooks>
            <bottomNav></bottomNav>
        </div>
    </div>
</template>

<script>
import bottomNav from "../../components/base/bottomNav.vue"
import bookCityRecommend from "../../components/bookCity/bookCityRecommend.vue"
import bookCityWomen from  "../../components/bookCity/bookCityWomen.vue"
import bookCityMan from  "../../components/bookCity/bookCityMan.vue"
import bookCityBooks from  "../../components/bookCity/bookCityBooks.vue"

import { getStoreNavi,getStoreShow } from '../../api/bookCity';
export default {
    data(){
        return{
            bookCityType:0,
            StoreNaviID:null,
            num:0,
            booklist:[],
            count:0,
        }
    },
    methods:{
        // 书城内页面切换
        BCT(e){
            console.log(e.target.textContent)
            let text = e.target.textContent
            if(text == "推荐"){
                this.num = 0;
                this.getStoreNaviFun();
                this.getStoreShowFun();
                this.bookCityType = 0;
            }else if(text == "女生"){
                this.num = 2;
                this.getStoreNaviFun();
                this.getStoreShowFun();
                this.bookCityType = 2;
            }else if(text == "男生"){
                this.num = 3;
                this.getStoreNaviFun();
                this.getStoreShowFun();
                this.bookCityType = 3;
            }else if(text == "图书"){
                this.num = 4;
                this.getStoreNaviFun();
                this.getStoreShowFun();
                this.bookCityType = 4;
            }
        },
        // 书城导航接口
        getStoreNaviFun(){
            getStoreNavi().then(data=>{
                console.log("书城导航模块",data)
                this.StoreNaviID = data.data.navi[this.num].id;
                // console.log(this.StoreNaviID)
            })
        },
        // 书城展示模块
        getStoreShowFun(){
            getStoreShow({"uuid":this.StoreNaviID}).then(data=>{
                console.log("书城展示模块",data)
                this.booklist = [];
                this.booklist = data.data.list;
                // console.log(this.booklist)
                this.count += 1;
            })
        },
    },
    filters:{
        hotCount(value){
            let w = value > 10000? value / 10000 : value; // 万计算
            let y = w > 10000? parseInt(w/10000)+"亿": parseInt(w) + "万";//亿计算
            return y;
        }
    },
    created(){
        console.log("这是vuex的数据",this.$store.state.bookIDList)
        if(this.count==0){
            this.num = 0;
            this.getStoreNaviFun();
            this.getStoreShowFun();
        }else{
            this.getStoreNaviFun();
            this.getStoreShowFun();
        }
    },
    components:{
        bookCityRecommend,
        bookCityWomen,
        bookCityMan,
        bookCityBooks,
        bottomNav,
    }
}
</script>

<style lang="less">
@import "../../assets/css/base.css";
.bookCityBigBox{
    padding-top: 51.6px;
    width: 100%;
    .BCBBB{
        position: fixed;
        width: 100% ;
        height: 50px;
        top: 0px;
        left: 0px;
        z-index: 10;
        .BCcontainer{
            .bookCityTitle{
                width: 100%;
                height: 100%;
                line-height: 50px;
                background-color: #ffe344;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .Toptions{
                    width: 60%;
                    margin-left: 20px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    span{
                        font-size: 19px;
                        font-weight: bold;
                    }
                    span.con{
                        position: relative;
                    }
                    span.con::after{
                        position: absolute;
                        left: 6px;
                        bottom: 5px;
                        content: "";
                        display: block;
                        width: 70%;
                        height: 0px;
                        border-bottom: 5px solid rgba(255, 0, 0, 0.479);
                        border-radius: 20px;
                    }
                }
                .search{
                    margin-right: 20px;
                    span{
                        font-size: 22px;
                        font-weight: bold;
                    }
                }
            }
        }
    }
}
</style>